<!--
  * 角色
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->
<template>
  <div style="overflow: auto">
    <a-checkbox-group v-model:value="checkedData">
      <div class="checked-box" style="width: 100%">
        <ul>
          <!--li 菜单模块 start-->
          <RoleTreeMenu :tree="tree" :index="0" />
          <!--li 菜单模块 end-->
        </ul>
      </div>
    </a-checkbox-group>
  </div>
</template>
<script setup>
  import { ref, watch, onMounted } from 'vue';
  import { useRoleStore } from '/src/store/modules/system/role';
  import RoleTreeMenu from './role-tree-menu.vue';
  import { menuApi } from '/src/api/system/menu-api';

  defineEmits(['update:value']);

  let roleStore = useRoleStore();
  let checkedData = ref();
  const tree = ref([]);

  function initMenu() {
    menuApi.queryMenu().then(({ data }) => {
      roleStore.initTreeMap(data || []);
      tree.value = data;
    });
  }

  onMounted(initMenu);

  watch(
    () => roleStore.checkedData,
    (e) => (checkedData.value = e),
    {
      deep: true,
    }
  );
</script>
<style scoped lang="less">
  @import 'index.less';
</style>
